<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 模拟购物车</title>
    <style>
        /* 简单的样式 */
        body {
            font-family: Arial, sans-serif;
        }

        .cart-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .cart-item img {
            width: 150px;
            height: 150px;
            margin-right: 10px;
        }

        .cart-item button {
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>购物车</h1>
        <!-- 添加新商品输入框和按钮 -->
        <div>
            <h3>添加新商品</h3>
            商品名称：<input v-model="newItemName" placeholder="商品名称"><br>
            商品价格：<input v-model="newItemPrice" type="number" placeholder="商品价格"><br>
            商品数量：<input v-model="newItemQuantity" type="number" placeholder="商品数量"><br>
            商品图片：<select v-model="newItemIcon">
                <option v-for="file in imageFiles" :key="file" :value="`./images/${file}`">{{ file }}</option>
            </select><br>
            <button @click="addNewItem">添加新商品</button>
        </div>
        <hr>
        <div v-for="(item, index) in cartItems" :key="index" class="cart-item">
            <!-- 商品图标 -->
            <img :src="item.icon" alt="商品图标">
            <span>{{ item.name }}</span>
            <span>数量: {{ item.quantity }}</span>
            <span>单价: {{ item.price }} 元</span>
            <span>小计: {{ item.quantity * item.price }} 元</span>
            <!-- 添加商品 -->
            <button @click="increaseQuantity(index)">添加</button>
            <!-- 删除商品 -->
            <button @click="decreaseQuantity(index)">删除</button>
        </div>
        <h2>购物车总计: {{ totalPrice }} 元</h2>
    </div>
</body>
<!-- 引入 Vue 3 -->
<script src="../libs/vue.global.min.js"></script>
<script>3
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                cartItems: [
                    { id: 1, name: '商品1', price: 10, quantity: 1, icon: './images/product_1.png' },
                    { id: 2, name: '商品2', price: 20, quantity: 1, icon: './images/product_2.png' },
                    { id: 3, name: '商品3', price: 30, quantity: 1, icon: './images/product_3.png' }
                ],
                newItemName: '',
                newItemPrice: 0,
                newItemQuantity: 0,
                newItemIcon: '',
                // 假设这是从后端获取的图片文件名数组
                imageFiles: ['product_1.png', 'product_2.png', 'product_3.png']
            };
        },
        computed: {
            totalPrice() {
                return this.cartItems.reduce((total, item) => total + item.quantity * item.price, 0);
            }
        },
        methods: {
            increaseQuantity(index) {
                this.cartItems[index].quantity++;
            },
            decreaseQuantity(index) {
                if (this.cartItems[index].quantity > 0) {
                    this.cartItems[index].quantity--;
                }
            },
            addNewItem() {
                if (this.newItemName && this.newItemPrice && this.newItemQuantity && this.newItemIcon) {
                    const newId = this.cartItems.length > 0 ? this.cartItems[this.cartItems.length - 1].id + 1 : 1;
                    this.cartItems.push({
                        id: newId,
                        name: this.newItemName,
                        price: parseFloat(this.newItemPrice),
                        quantity: parseInt(this.newItemQuantity),
                        icon: this.newItemIcon
                    });
                    // 清空输入框
                    this.newItemName = '';
                    this.newItemPrice = 0;
                    this.newItemQuantity = 0;
                    this.newItemIcon = '';
                }
            }
        }
    });
    app.mount('#app');
</script>

</html>